<template>
  <div style="height: 100%;">
    <a-layout class="frame">
      <a-layout-sider v-model="collapsed"
                      :trigger="null"
                      :width="180"
                      collapsible>
        <!-- logo -->
        <div class="logo">
          <!--          <img :src="loginInfo.loginLogo"-->
          <!--               class="logo-img">-->
          <!--          <img :src="loginInfo.loginLogoIcon"-->
          <!--               class="logo-icon">-->
        </div>

        <!-- 菜单 -->
        <a-menu mode="inline"
                :open-keys.sync="activeMenu.openKeys"
                :selected-keys="activeMenu.selectedKeys"
                @click="clickMenu">
          <template v-for="menu in resourceMenuList">
            <a-menu-item v-if="!menu.children" :key="menu.id">
              <a-icon :type="menu.icon"/>
              <span>{{ menu.title }}</span>
            </a-menu-item>
            <sub-menu v-else :key="menu.id" :menu-info="menu"/>
          </template>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <template>
            <a-icon class="trigger"
                    :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                    @click="() => (collapsed = !collapsed)"/>
            <span class="trigger-split-line"></span>
          </template>
          <frame-header-user/>
        </a-layout-header>
        <a-layout-content>
          <!-- 内容区域 -->
          <router-view/>
        </a-layout-content>
      </a-layout>

    </a-layout>


  </div>
</template>
<script lang="ts">
  import { Component, Vue, Watch } from 'vue-property-decorator'
  import { frameActiveMenuSession, frameMenuSession } from '@/storage'
  import { ActiveMenu } from './definitions/definition'
  import { Action, Getter } from 'vuex-class'
  import { loginInfo } from '@/config'
  import { menuList } from '@/pages/frame/src/menuList'
  import SubMenu from '@/pages/frame/components/subMenu.vue'
  import * as actionTypes from '@/store/actionTypes'
  import FrameHeaderUser from './components/headerUser/index.vue'

  @Component({
    components: {
      SubMenu,
      FrameHeaderUser
    },
  })
  export default class Frame extends Vue {
    private collapsed: boolean = false

    private resourceMenuList: any[] = menuList // TODO frameMenuSession.getJSON()

    @Action(actionTypes.LOGOUT)
    private logout!: any
    @Getter
    private isLogined!: boolean

    private loginInfo = loginInfo

    // 默认打开的菜单
    private activeMenu: ActiveMenu = {
      selectedKeys: [],
      openKeys: [],
    }


    protected created() {

    }


    // 当菜单发生改变时重新设置激活菜单项
    // 修改菜单时需把frameActiveMenuSession数据清除
    @Watch('resourceMenuList', {
      immediate: true,
    })
    private watchResourceMenuList(list: any[]) {
      const activeMenu = frameActiveMenuSession.getJSON() as ActiveMenu
      Object.assign(this.activeMenu, activeMenu)
      if (!activeMenu.selectedKeys || activeMenu.selectedKeys.length === 0) {
        if (list && list.length) {
          for (const menu of list) {
            if (menu.children && menu.children.length) {

              break
            }
          }
        }
      } else {

      }
    }

    @Watch('activeMenu', {
      deep: true,
    })
    private watchActiveMenuIds(activeMenu: ActiveMenu) {
      frameActiveMenuSession.setJSON(activeMenu)
    }

    // 点击菜单
    private clickMenu(data: any) {
      this.activeMenu.openKeys = data.keyPath
      this.activeMenu.selectedKeys = [data.key]
      const menu = this.getMenuById(data.key)
      if (!!menu) {
        if (this.$route.name !== menu.url) {
          this.$router.push({ name: menu.url })
        }
      } else {
        this.warning('菜单不存在')
      }
    }

    private getMenuById(menuId: any) {
      let menu: any = ''
      const readNodes = function(list: any[]) {
        list.some((item: any) => {
          if (item.id === menuId) {
            menu = item
            return true
          }
          if (item.children && item.children.length > 0) {
            readNodes(item.children)
          }
        })
      }
      readNodes(this.resourceMenuList)
      return menu
    }
  }
</script>
